<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位(relative position)</title>
  <!-- 
    CSS中的相对定位（relative positioning）是指元素相对于其在正常文档流中的原始位置进行定位，但仍保留其在文档流中的占位。
    相对定位相关的常见属性和特性： 
 
      1. position: relative;：通过设置元素的position属性为relative，元素可以使用top、right、bottom、left属性来相对于其原始位置进行移动。 
      2. 相对定位不会使元素脱离文档流，仍然占据原来的位置，但可以在原始位置基础上进行微调。 
      3. 相对定位对其他元素布局的影响较小，通常用于微调元素的位置或与绝对定位元素的配合使用。 
   -->
   <style>
     .position-relative {
       /* 相对定位 */
       position: relative;
       top: 50px;
       left: 100px;
     }
   </style>
</head>
<body>

  <span>position-relative-span</span>
  <div class="position-relative">position-relative-div</div>
  <img src="../../images/music_album01.jpg" alt="" srcset="">
  
</body>
</html>